<template>
    <div>
        <top></top>
        <div class="item">
            <div class="itemImage">
                <img :src=imgUrl style="width: 100%" alt="">
            </div>
            <div class="itemInfo">
                <div>
                    <div class="name">{{ item_name }}</div>
                    <div class="subtitle">系列：{{ product }}</div>
                    <el-row class="icons" style="margin-bottom: 20px">
                        <el-col :span="6" style="display: flex"><img src="../assets/img/support.png"
                                                                     alt=""/><span>正品保障</span></el-col>
                        <el-col :span="6" style="display: flex"><img src="../assets/img/support.png"
                                                                     alt=""/><span>便捷配送</span></el-col>
                        <el-col :span="6" style="display: flex"><img src="../assets/img/support.png"
                                                                     alt=""/><span>优质服务</span></el-col>
                        <el-col :span="6" style="display: flex"><img src="../assets/img/support.png"
                                                                     alt=""/><span>售后无忧</span></el-col>
                    </el-row>
                    <hr>
                </div>
                <el-row style="display: flex;align-items: center">
                    <el-col :span="3" class="label">单价：</el-col>
                    <el-col :span="10" style="color: #fe4c25;font-size: 20px">¥ {{ price }}</el-col>
                </el-row>
                <el-row style="display: flex;align-items: center">
                    <el-col :span="3" class="label">版本：</el-col>
                    <el-col :span="10" style="font-size: 20px">{{ version }}</el-col>
                </el-row>
                <el-row style="display: flex;align-items: center">
                    <el-col :span="3" class="label">颜色：</el-col>
                    <el-col :span="10" style="font-size: 20px">{{ color }}</el-col>
                </el-row>
                <el-row style="display: flex;align-items: center">
                    <el-col :span="3" class="label">数量：</el-col>
                    <el-col :span="10" style="font-size: 20px">
                        <div class="quantity-input">
                            <button @click="decreaseQuantity">-</button>
                            <input type="number" v-model="quantity" :min="1" :step="1">
                            <button @click="increaseQuantity">+</button>
                        </div>
                    </el-col>
                </el-row>
                <el-row style="display: flex;align-items: center">
                    <el-col :span="3" class="label"> 总价：</el-col>
                    <el-col :span="10" style="color:#fe4c25;font-size: 22px;font-weight: bold">
                        ¥ {{ price * quantity }}
                    </el-col>

                </el-row>
                <div class="buttons-container">
                    <button class="add-cart-button" @click="addCart()">加入购物车</button>
                    <button class="buy-button" @click="payment()">立即购买</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import top from "./common/top.vue";
import axios from "axios";

export default {
    components: {top},
    data() {
        return {
            imgUrl: "",
            item_id: window.sessionStorage.getItem("item_id"),
            item_name: "",
            product: "",
            version: "",
            color: "",
            price: "",
            quantity: 1
        };
    },
    mounted() {
        this.showItemInfo()
        this.showImage()
    },
    methods: {
        showItemInfo() {
            const item_id = this.item_id
            axios({
                method: "get",
                url: "items/items/" + item_id,
                data: {
                    itemId: item_id
                }
            }).then(res => {
                let data = res.data.data
                console.log(data)
                this.item_name = data.itemName
                this.product = data.product
                this.price = data.price
                this.color = data.color
                this.version = data.version
            })
        },
        showImage() {
            axios({
                method: "get",
                url: "images/items/" + this.item_id,
                responseType: "blob"
            }).then(res => {
                this.imgUrl = URL.createObjectURL(res.data);
            })

        },
        decreaseQuantity() {
            if (this.quantity > 1) {
                this.quantity--
            }
        },
        increaseQuantity() {
            this.quantity++
        },
        addCart() {
            if (!window.sessionStorage.getItem("username") && !window.sessionStorage.getItem("token"))
                this.$router.push("login")
            else {
                axios({
                    method: 'POST',
                    url: '/carts/items',
                    data: {
                        count: this.quantity,
                        itemId: window.sessionStorage.getItem("item_id")
                    },
                    headers: {
                        "token": window.sessionStorage.getItem("token")
                    }
                }).then(res => {
                    this.$message.success('成功加入购物车')
                })
            }
        },
        payment() {
            if (!window.sessionStorage.getItem("username") && !window.sessionStorage.getItem("token"))
                this.$router.push("login")
            else {
                this.$router.push({
                    name: 'payment',
                    params:
                        {
                            isGouWuChe: false,
                            itemName: this.item_name,
                            itemId: this.item_id,
                            listprice: this.price,
                            color: this.color,
                            version: this.version,
                            count: this.quantity
                        }
                })
            }
        }
    }
};
</script>

<style scoped>

.item {
    margin: 60px 100px 0;
    display: flex;
    justify-content: space-around;
}

.itemImage {
    width: 40%;
    margin-right: 10px;
}

.itemInfo {
    width: 40%;
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.name {
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 20px;
}

.subtitle {
    font-size: 20px;
    color: #999;
    margin-bottom: 20px;
}

.icons {
    margin-bottom: 20px;
}

.icons img {
    width: 32px;
    height: 32px;
    margin-right: 10px;
}

.icons span {
    height: 32px;
    line-height: 32px;
    font-size: 20px;
    font-weight: 500;
}

.label {
    font-size: 20px;
    font-weight: bold;
}

.buttons-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.add-cart-button,
.buy-button {
    display: inline-block;
    padding: 0 32px;
    height: 45px;
    line-height: 45px;
    border-radius: 5px;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease-out;
}

.add-cart-button {
    margin-right: 15px;
    background-color: #ff5000;
}

.buy-button {
    background-color: #ff0000;
}

.add-cart-button:hover {
    background-color: #ff6000;
}

.buy-button:hover {
    background-color: #ff2000;
}

.add-cart-button:active {
    background-color: #ff4000;
}

.buy-button:active {
    background-color: #ff1000;
}


.quantity-input {
    display: flex;
    align-items: center;
}

.quantity-input button {
    width: 26px;
    height: 26px;
    background-color: #eee;
    border: none;
    cursor: pointer;
    font-size: 18px;
    line-height: 24px;
    text-align: center;
    vertical-align: middle;
    color: #666;
}

.quantity-input input {
    width: 60px;
    height: 24px;

    padding: 0 5px;
    border: 1px solid #ccc;
    font-size: 14px;
    text-align: center;
    color: #333;
    box-sizing: border-box;
}
</style>
